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About VWO 



VWO is a leading website testing platform used by more 
than 3,700 brands in 75 countries to increase eCommerce 
sales and conversions. 

Companies such as ShoeDazzle, Groupalia, JustFab and 
Unibet use VWO to understand and analyze online user 
activity and behavior. 

VWO offers marketers an easy-to-implement and use, but 
highly effective A/B testing, multivariate, behavioral 
targeting, usability and heat map testing solution that 
requires no coding knowledge. 

https://vwo.com/ 
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Introduction 



"I've been amazed 
at how often those 
outside the 
discipUne of 
design assume 
that what 
designers do is 
decoration. Good 
design is problem 
solving." - Jeffrey 
Veen, *The Art & 
Science of Web 
Design' 



The quote on the left captures the basic essence of User 
Experience or UX. So, what exactly is UX and why is it 
important in the online space? The term 'User Experience' 
was coined by Don Norman in 1980 as a way to 'cover all 
aspects of the person's experience with a system, including 
industrial design, graphics, the interface, the physical 
interaction, and the manual'. 

In the online space. User Experience, as the name 
suggests, is the overall experience of a user when 
browsing a website. To understand this further, let us look 
at what goes on in the mind of a web user as he/she 
browses through a website: 

• Does this website provide me with some value? 

• Is the information flow cohesive and logical or is it 
haphazard and random? 

• Is it easy to use? 

• Is it pleasant to use? 

Creating a truly great User Experience on your website 
means making your users respond positively to all of the 
questions above. UX is thus the sum total of all factors 
that create the perception of the website in the minds of 
the users. These factors also form the bedrock of their 
decisions to become eventual customers. 
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Credibility 

Trust 
Harmony 
Spirit 



Cx 




„JOY OF USE" 
Interaction 
Reaction 




At this stage, designing a website for an optimum User 
Experience might seem a little daunting. 

'How do I begin?' 

'How much time is this going to take?' 

'Do I need to hire someone to do this for me?' 

'What about the costs?' 

Though it cannot be denied that designing a great UX site 
is a challenging task, there are some best practices you 
can implement to get some easy lifts for your website. 
These 'low-hanging fruits' will further reinforce the 
importance of User Experience in your company as well 
as give you the confidence to carry out more such 
campaigns in the future. 

In this post, I am going to discuss 26 best practices which 
can be easily implemented by you to improve your 
eCommerce User Experience. 
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#1. Navigation -Tell People 
Where They Are and Where 
They Should Go 



1 














1 
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You sit down in front of a computer screen which 
shows one of the deeper level product pages in the 
sport apparel category of an eCommerce website. Can 
you tell exactly where you are in the product structure 
and are you easily able to navigate to another category, 
say, the latest novels in the romantic genre? If the 
answers to the above questions are in the negative, 
then the website has a poor navigation design which 
may be hampering the overall User Experience. Ease of 
use is, in fact, one of the main factors which influence 
UX. Bizztravel Wintersport , a VWO customer, 
increased conversion rate by 21.34% by simplifying 
their navigation and reducing number of clicks 



The Online Megastorc 



required to reach a particular page. 

Some of the best practices that can be followed to improve 
this aspect of the website are: 

• Use breadcrumb navigation to let users know 
where they are. A "breadcrumb" or a "breadcrumb 
trail" is a type of secondary navigation scheme that 
reveals the user's location in a website or Web 
application. Breadcrumb navigation helps the user 
to understand the product hierarchy as well as 
navigate to other areas of interest. They are also 
known to reduce bounce rates. See image for an 
example, (highlighted in red box) 

• Highlight the active product line to make sure the 
readers understand where they are. 



^ Flipkart Rrst ^ Dovmload App 24x7 Customer Care Track Order 0 Signup Login 



ELECTRONICS MEN WOMEN BABY & KIDS BOOKS & MEDIA HOMES KITCHEN MORE STORES OFFERS ZONE 



Horrip - A.I I Brands := AppI? ■= Computers - Laptops 



BROWSE 

V Apple 

V Computers 
V Laptops 

REFINE 



' Laptop - Extra 10% off (2) 



Price 

Rs 10001 -Rs 20000(0) 
Rs. 20001 - Rs 30000 (0) 
Rs 30001 • Rs 40000 (0) 

" " " " " r. 

□ Rs 50001 - Rs 60000 C3) 
D Rs. 60001 and Above (18) 



Processor 

Search by Processor 



B 




BUY INTEL® BASED LAPTOPS" & GET 

EXTRA 10% CASH BACK 

ON STANDARD CHARTERED CREDIT/DEBIT CARDS 



APPLE LAPTOPS O 



Search within Apple Laptops 



Showing 21 products 



Apple MD760HN/A 
MacBook Air (4th Gen 
as/ 4GB/ 128GB Fl . 
***** (124 ratings) ^ 
rto 7 4 000 20% OFF 

Rs. 59801 

EMI from Rs. 2900 



Apple MD711HN/A 
MacBook Air (4th Gen 
Ci5/4GB/ 128GB Fl . 

1,6? ratirgs} ^ 
R9 »t OO0 10% OFF 

Rs. 58250 

EMI from Rs. 2825 



Sort by: | Popularity 



B^sS^^Wl KIS^^^i 




Apple MD761HN/A 
MacBook Air {4th Gen 
Ci6/ 4GB/ 266GB Fl. 

(43 ratings) ^ 

Rs. 78500 

EMI fromRs. 3807 



Apple Macbook Pro 
Laptop (Silver) 

08 ratings) ^ 
na. lUOGG 9% OFF 

Rs. 104500 

EMI from Rs. 5057 

• Core i5 (4th Gen) 

• 8GBDDR3RAM 
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#2. Navigation - Have an 
nternal Site Searcli Option 



Even though you may have complete confidence in the 
navigation feature of your website, sometimes your user 
may feel the need to search for something instantly 
without finding his way through the navigation structure. 
It is thus essential that you have a search option for your 
website. 



Frack your ordef" Return an ":ern O Ccntact us 'r>s 



THE ICONIC 



Women Men 



1^ Log in ^ WTshIra Q 



ENDS SUNDAY! HALF PRICE EXCLUSIVES* CODE: HALF 



3H9 DELIVERY IN SYD 4 MEL 




Shop Women I 




Shop N/llr)^ 



live chat 



#3. Navigation - Linl< 
Company Logo to the Home 
Page 

The company logo on every page being a clickable 
element leading to the homepage has become a 
convention followed by every major website. Not having 
this functionality may lead to confusion in the minds of the 
user. 
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#4. Navigation - Show 
Complementary and Related 
Products on Individual 
Product Page 



As a business owner, you want the user to purchase add- 
ons, related products and accessories of the products they 
buy. One way to achieve this is to provide good options for 
upsellinq and cross-selling on the product pages. 
Suggesting complementary and related products not only 
makes sense from a short-term revenue point of view, it 
also influences the overall UX of the website. Good 
suggestions for similar and related products not only 
improve the browsing experience but also aid in product 
exploration. 



Customers tlTio Bought This 
Item Also Bought 



Fit Sun^ey: 67% Felt true to size 100% Felt true to width 100% Moderate arch support 



• View the size chart 

• It is recommended that you order 1/2 to 1 full size larger than your usual size. 

• Get that eye-catching summer look with the chic Onex® Hope sandal. 

• Elastic upper adorned with eye-catching stud design for a touch of glamour and style. 

Show More Information * j 
You May Also Like 



Onex 

Tory 
S80.99 S89.00 






Onex 
Isadora 
S99.OO 



Onex 

Balboa 
S91.OO 



Onex 

Sonic 



Onex 

Paulie 
S91.OO 



Onex 

Burst 
S89.OO 
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#5. Colors - Focus on Text- 
to-Background Contrast to 
Innprove Readability 



The book ' Eve Tracking in User Experience Design ' 
presents some important research which shows that a 
high contrast between foreground and background leads 
to better readability. A research study shows that reading 
time is lower in case of high contrast and vice versa. All of 
this shows that good text-to-background contrast plays a 
role in overall User Experience. 



Awesome 



Standard 
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#6. Colors - Make your 
Primary CTA Button easily 
distinguishable 









^ VelocityPage 

Pain-free page building for WorcJPress 


US 




BUYNOWH 


DEMO PRICING CONTACT BLOG LOGIN f S# 









New Way to Effortlessly Add Stunning 

Webpages to Your WordPress Website in Minutes 

Add dazzling landing pages to 
your site with one click. 

Real-time drag & drop editing 
right on your page. 

No coding, design or technical 
skills required. 



Get Started 



The primary call-to-action (CTA) button should be one of 
the most visible elements on your webpage. Some 
marketers and designers mistakenly place and design the 
primary CTA in such a way that customers have to make 
an effort in locating it. Some tips to make your CTA 
buttons stand out: 

• Use color to create a high contrast between your 
CTA button and the rest of the page. This ensures 
that users cannot miss that all-important button 
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Ensure that the color of your primary CTA buttons 
are consistent throughout the website 

Make sure that your primary and secondary CTA 
buttons are clearly differentiated through font and 
size 



#7. Colors - Use Colors to 
communicate your Message 
quickly and efficiently 



One account is all you need 

A single username and password gets you into everything Google. 

B M C O ► Q 



Make Google)/ 

Set up your profile and preferences 




Password strength: Strong 


Use at least 8 characters. 


Vt use a 


password from another sit« 


l^omething 


too obvious like your pet's m 


he Why? 



Name 

An and 

Choose your username 

j kansal987654 

Create a password 



"I 



Take it all with you 

Switch between devices, and pick up wherever you left off. 



Confirm your password 



Birthday 



Month 



Day 



You can't leave this empty. 
Gender 



lam... 



You can't leave this empty. 
Mobile phone 



+91 



Your current email address 



@gmajl.com 



Prove you're not a robot 

Skip this verification (phone verification may be 
required) 



Colors play a big role in how we perceive a message. Look at 
the image above, the validity of the password is depicted by 
the color green while the negative message 'You can't leave 
this empty' is written in red. Different colors convey different 
subliminal messages, which have been coded into our 
brains, either genetically or through convention. Brands also 
use an overall color scheme to convey the desired brand 
identity without saying it out loud. 
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#8. Images - Focus on 
Quality and Size of Product 
Images 



Nike Lunareclipse +4 

♦ ♦ ♦ . J Review 




$135.00 

Ships Free! 
Wolf Grey/Cool Grey, ' 

Choose Women's Siz ▼ 

Width: B - Medium 
Don't see your size? 



Add to Cart 



Add to Favorites j 

Share: Q Q C3 Q 



Photos have a huge impact on the usability and overall UX 
of the website as well as increasing conversions and sales . 
Generally, there are 3 kinds of product images which are 
used: thumbnails, used in search results or category 
listings; product page images, displayed on a product page 
and lastly, detailed or zoomed images, which are displayed 
when the user chooses to see a close-up of the product. In 
addition, companies like Zappos also use multiple images of 
the same product clicked from various angles. 

Some best practices which you should follow to improve the 
quality and relevance of the product images are as follows: 

• For thumbnail images, use the largest image size 
which fits in your layout 
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For product page images and zoomed images, you 
should be mindful of download times. You need to 
keep in mind that not everyone has a super-fast 
internet connection, and that high load time can 
negatively affect the bottom line 

It's better to have a high-contrast plain background to 
emphasize the product in the image 

Adjust brightness to account for the color of the 
product. For example, if you have an image of a black 
shoe, having a dull photo will make the features 
indiscernible 

Ensure that the product features are clear in all the 
sizes. You don't want the zoomed image to appear 
hazy and distorted 



#9. Images - Use Inspirational 
Product Innages to Enhance 
Desirability 

Inspirational product images are images of a product in 
context, for example, an image of a dining table in the 
context of a dining room or a photo of a model wearing a 
particular dress. Used in place of images that just show the 
product, they increase the aesthetic appeal of the product as 
well as make it more desirable. 



LINE THEM UP RING 

$11.90 



This Aztec skull ring has been made by MERRIN S GUSSY. Tlte 
details include: a long shm top \vith a slim shank and a tripple skuU 

design. 

ABOUT THEM£RRm& GUSSY COLLICnON 

Voung, exatmg and diverse, the f-fB!/?IN & GUSSY CoSection seardies the ghbe tor the 
most exotng new product, our Adeiaide based Desi^ Team is m^ed by the jeweSery and 
fysh/on ndi/stnes latest trerxis and products. 



Brand: Merrin S Gussv 
Size 

Ring: One size fits ail. 
Material 
Metal Alloys 
Product Code: 112 

SIZE (RING) • 
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A few points regarding inspirational product images: 



• Pay careful attention to the ancillary objects and 
features in the image. Supporting objects, if too 
attractive, may tend to shift the focus away from the 
main product, especially if there is a confusion in the 
overall message which is being conveyed. In a studv 
on inspirational product images conducted by 
Bavmard Institute , test subjects were shown an 
American Eagle Outfitters image of a model wearing a 
sweater and a scarf. It was found that the test 
subjects were more interested in the scarf, even 
though the image was for the sweater category 

• Sometimes such contextual images contain multiple 
products and link to the overall product category. For 
example, an image of a bathroom may contain 
perfumes, mirrors, towels and may link to the 
"bathroom furnishings" product category. Users can 
feel confused and frustrated if they expect to reach the 
particular products depicted in the image. In such 
cases, it may be a good idea to pin tiny buttons on the 
depicted products, as shown in the screenshot below 
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#10. Product Descriptions - 
Use Videos to Improve 
Product Understanding and 
Engage Customers 



OUR STORY 
WHY LUXY HAIR? 
BEFORE & AFTER 
REVIEWS 
VIDEOS 



pfwvacvpoucv 

TEIMS OP USE 
PAYMENTS 



We are ^ways here to help you wnh your hair extensions needs. We've created many videos to help you 
along the way. Make sure to check out and subscribe to our popular You~ube channel {Luxy Hain for har 
tutorials, hair tips, and other helpful hair videos. If you are looking for reviews, you can find some of ihe Luxv 
Hair Bctensions reviews by clicking here. 

1. How to Pick your Perfea Luxy Heir Extensions Shade 

2, Luxy Hair Extensions ICl 

3- How to Clip in Hair Extensions 

4. How lo Wash Luxy Hair Extensions 

5. How to Care and Store your Luxy Hair Extensions 

6. How to Btend Straight Hair with Luxy Hair Extensions 
7- How to Blend Luxy Hair Extensions wt&i Shcri Hair 



8. Tips for Healthy Hair 



How to Pick Your Periect Luxy Harr 


Extensions S... 




















w 



PICK YO 



SHADE 




Luxy Hair Extensions 101 




HAIR E] ► :NSI0NS 



101 



O ' 
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Visuals work much better than text when it comes to 
conveying a message. Many ecommerce sites are using 
videos in different ways to improve customer understanding 
of their products as well as make their content more 
engaging and intimate. SixPackAbsExercises .com , a VWO 
customer, used videos on the sales page to increase 
conversions by 46% . 

Videos also help the customers to gain a more intimate 
understanding of product look as well as functionality. For 
example, Luxv Hair have a separate video section on their. 
See the image on the previous page for a screenshot. 

Zappos have used videos in innovative ways by having an 
extensive Youtube channel as well as using videos in their 
' Our Unique Culture ' section. If you decide to have videos on 
your website, you may also look at having transcripts for the 
videos. These not only ensure that viewers with hearing 
disability can access your video content, it also improves the 
SEP for that video. 
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#11. Product Filters - Provid 
a 'Most Searched' or 'Most 
Popular' List 



Just like social media buttons, a 'Most Searched' or "Most 
Popular' list also adds social proof which help in 
persuading the users to check out those products. In 
addition, they also come in handy when you want to 
optimize your internal search results. Suppose you see that 
'woolen coat' is a popular search. It may be a good idea to 
optimize your search results for 'woolen coat' so that the 
most relevant items come on top. You can even have such 
lists for every category and sub-category for best results. 



Save big on must-haves for college 



Gift Cards - Regi5tr>' - 



Track My Orders ' 



Walmarr';- 

Value of the Day 

Electronics & Office 

Movies, Music & Books 

Home, Furniture & Patio 

Clothing, Shoes & Jewelry 

Baby & Kids 

Toys & Video Games 

Sports, Fitness & Outdoors 

Auto & Home improvement 

Photo & Gifts 

Crafts & Party Supplies 

Pharmacy, Health & Beauty 

Grocery, Household & Pets 

College Living 

See All Departments 



Trending Your Store 

Now Set It Now 



Go 



FREE SHIPPING on nearly everything" Leamwore ► 




Get our favorite Apple 
products on Rollback 

Save more online and in stores. 



iPhooeli 

on Straight Talk 

just 

«299 

was 5499 



#12. Product Filters - Have a 
Separate Discount Section 



JIGSAW 



Search entire store here.. 



LOG IN CHECKOUT MY BAG 



SHOPPING USA ^ CHANGE REGION 
MY WISHLIST MY ACCOUNT 



WOMENS ACCESSORIES BAGS NEW ARRIVALS EXPLORE 



FREE US SHIPPING ON ORDEKS OVER J200 
HOME > SALE 

SALE 




ALL SALE > 
DRESSES > 
SWEATERS > 
JACKETS > 
SKIRTS > 
SHIRTS & TOPS > 
PANTS > 
BAGS > 

SHOES, BOOTS & SANDALS > 
ACCESSORIES > 
WORKWEAR > 
LOW STOCK STYLES > 




1 TO « OF JOS STYIES FOUND 



PAGE: I 2 3 4 3 » 



SHOW I 45 ' I ret PAGE 



CATiOORY 

SALE SHIRTS AND TOPS 
SALE DRESSES 
SALE ACCESSORIES 
SALE SWEATERS 
SALE JACKETS 



According to a study published by the Nielsen Norman 
Group , bargain-hunters are one of the 5 main types of online 
shoppers. Another study done by Eskimi , a mobile-first 
community in emerging countries, found out that 33% of 
mobile eCommerce users are daily bargain hunters while 
44% are weekly bargain hunters. Thus, it is advisable to 
have a separate 'deals' or 'discounts' section on your 
website, as done by companies like Jigsaw London (shown 
in screenshot above) and Amazon, in order to cater 
effectively to these customers. 
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#13. Social Proof- Make it 
Social 



More and more online buyers are sharing their favorite finds 
with their Facebook friends or their Twitter followers. Some 
reasons why you should definitely have social media buttons 
on your website are 

• It provides the friends/followers with social proof , 
which may result in increased purchases of the same 



• It helps to spread brand awareness 

• It may also increase traffic on your website which will 
help in increase in overall sales, quite apart from the 
particular product which has been shared 

However, you may choose to refrain from using these 
buttons on certain pages, like the payment and checkout 
pages to prevent user distraction. You may also keep in 
mind that if the number of likes and share are too few in 
number, it may result in negative social proof . 



item 




25 



#14. Social Proof -Add User 
Reviews and Testimonials to 
Product Pages 



In a recent survey done in the UK, 43% of respondents said 
that they used their mobiles to compare prices and look at 
product reviews while shopping. Though not connected to 
eCommerce per se, this statistic only serves to remind the 
importance of 'social proof in shopping. WikiJob.co.uk . a 
VWO customer, increased sales bv 34% by adding 
testimonials on one of their web pages. 



3.3 out of 5 stars « And unfortunately it did not help with potty training as 

the "cool" sensation did not alert him enough (this was 
our first attempt in potty training). " 



5 star 




(16) 


4 star 


■ 


(9) 


3 star 


■ 


(11) 


2 star 


1 


(5) 


1 star 


■ 


(10) 



See all 51 reviews 



"And, I LOVE the easy open sides. 



These are the worst diapers I have ever used my 
grandson would wake up soaking wet ever^' morning 
causing us to have to change the whole bed every 
day. " 



According to an iPerceptions study, 61% of customers read 
online reviews before making a purchase decision, while 
63% of customers are more likely to make a purchase from a 
site which has user reviews. User reviews are great 
purchase motivators, since the customer's confidence 
regarding the product quality and reliability increases 
significantly if he sees that other people have bought the 
product and liked it. 
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#15. Checkout and Post- 
Checkout - Ask only what is 
required 



Full Name 

V 



Email 



Password 



Retype Password 



Just In case, Retype Password 



Mother's Maiden Name 



Spouse's Age 



Pet Dog's Name 



Name of your Dead Grandmother's 3rd Grade Teacher 



SIGN UP 
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A recent research study done by Econsultancy found out 
that 1 out of 4 online shoppers who abandon a purchase 
after adding items to their cart do so because they are 
forced to register before completing the purchase. 

This study shows that you may be losing almost 25% of 
your revenue, just because you ask users for more than is 
required. Following are some ways in which you may be 
doing this exact same thing: 

• Asking users to login or signup before browsing the 
website 

• Having lengthy form fields with expendable data such 
as nationality, gender etc. 

• Requiring users to type in billing and delivery 
addresses separately 

Asking all of this info may result in user fatigue, irritation as 
well as make the user wary of spam. Instead, you should ask 
only the necessary information. You could even make the 
user's task easier by using the delivery address as billing 
address by default, giving the option of logging in through 
Facebook, Gmail, Twitter and others. 
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#16. Checkout and Post- 
Checkout - Show Total Cost 
on the Product Page 

Nothing is more irritating to a customer than selecting a 
product, making a purchase and reaching the checkout 
section only to discover the addition of unexpectedly high 
delivery charges and hidden taxes. 

Though we understand that high delivery charges are 
unavoidable in some cases, it is also important to note that 
this feeling of frustration on part of the customer increases 
when it is not revealed on the product page. Posting the total 
cost on the product page eliminates the surprise of a high 
shipping cost and also lets the customer factor in the total 
cost before adding the product to the cart. 

Product Cost 




•DELIVERY CHARGES -TOTAL TAX APPLICABLE; 
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#17. Checkout and Post- 
Checkout - Build Trust with 
Security Labels 



Security labels act as reinforcements, especially on payment 
pages. These labels build trust in the authenticity of the 
website. 
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#18. Checkout and Post- 
Checkout - Communicate 
Order and Delivery 
Confirmation 



..III AT&T 30 1 1 :28 AM 


^ [S3 


Thank You 


Done 


4229 University Way NE 

Open today 1 1 :00 AM to 10:00 PM 


Map 


Your order was received and you will 
be sent an email receipt. Review your 
order below. 


Pickup Name: Troy Davis 




Pickup Time: 11:45AI\/I 


Troy 




Steak Burrito $5.95 

steak, Chicken, Rice, Fajitas, Black Beans, Fr... 


Subtotal: 


$5.95 


Tax: 





Order confirmation and delivery confirmation are not 
part of the upfront selling process. Strictly speaking, 
unless the user has to go to the website to receive 
these messages, they are not a part of the website 
user experience. Nevertheless, they must be 
considered a part of the total user experience since 
they influence how customers perceive the entire 
shopping experience. 

Order confirmation message and delivery 
confirmation message, sent after delivery has been 
made, help in providing reassurance to customers, 
especially if you are buying from you for the first 
time. They help in turning first-time buyers into 
regular customers. 
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#19. Typography - Correct 
Grammar and Spelling is 
mportant in Building Trust 





Suppose, in an alternate universe, you want to know 
how it feels to own a pet monkey. Would you trust 
this website? 



USDA Licensed! Each Primates comes with a health 
certificate! 

Our babies are bottle fed and wear diapers! We also offer a 
group 

For our customers to join to chat and e-mail monkey owners 
like you 

and to become friends. A source for all your primate needs. New 
Updates on the monkey world across America. A news letter 
will be 

Posted each month to help educate and keep yon positive with 
Knowledge and proper care and needs for you and your new 
baby 

Primate. We pledge to be here, and to help with any questions 
that 

\^'ill make caring for your primate, with the up most 
knowledge we 

Can provide with our many outside experts from the monkey 
world. 

Deposits are not refundable! 

For more detailed information, Call or Email me I 
rainbov,primates@gmail. com 



Jamie Crawford 




Incorrect spelling and faulty sentence correction can 
make a significant dent in your trust score and your 
authenticity in the customer's eyes, which is very 
important since he cannot interact with you face-to- 
face. Thus, it is imperative that you double-check 
your website copy. There are many free tools which 
help you do this, such as PolishMvWriting . 
GinqerGrammarChecker and others. 
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#20. Layout - Display the 
'Contact Us' Section 
pronninently 



Make the 'Contact Us' section a permanent fixture on every 
page on your website. Additionally, the placement of section 
should be consistent and logical. In case you have a single 
contact number, it may be a good idea to display the number 
on every page, like in the example below. 

Many websites, also give different options for the user to 
contact them. This gives the user the added ease of 
communicating in the medium he or she is most comfortable 
in. 



INDIA'S TRUSTED ONLINE JEWELLER: 30-Day Money Back ■ Cash-on-Delivery ■ Lifetime Exchange 


My Account | Saved Itetrs (0) - 1 Try at Home (0) • | Cart(O) ■ 


♦J' ' CARAT LANE ^ 

^^^^ 


Track Your Order | ^1800-102-0103 


SOLITAIRES JEWELLERY GOLDCOINS GIFTS COLLECTIQM^^Wy^THOME 


SHIPS FAST OFFERS Search Jewellery 





HOME ! JEvVELLEm ? KEN PLATINUM BAND FOR HIM 




Ken Platinum Band for Hiin 

set in Diamond (0.11 Ct, U, SI, Round), Platinum U.I 9 gms) certified by SGL 
Cmtornxie 

SmgS\ze | SeledOne ▼ | Not Sure? We can help. 
f 28,922 ^ 26,030 V«w Price Break.up 
Save Extra 10% . Use Promo Code, WOW 



BUY NOW 



Ships t)y12Jul 2014 
Need it sooner^ Chat now 




Save For Later 
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#21. Layout - Make Clickable 
Areas large 



TABl 



TAR 9 I 




TABS 



TAB 4 



Actual clickable area 
|| — Ideal clickable area 



Make sure that all clickable elements are large and easy to 
click. You can either make the element larger or add padding 
to the clickable elements to make them larger. A larger 
clickable area makes it easier for the user to hover the 
mouse over the link. Below is the code to add padding to any 
element through HTML. 



<a href ="http: //www. examplesite.com" style="padding: 5px;">Example Site<a> 
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#22. Layout - Soft Add to Cart 



Soft add to cart is a feature that lets users see their cart 
without making them go to a new page. With this feature, 
users can browse the website with a dialog box showing the 
updated card. You can also have a 'View Cart' button which, 
when hovered on, shows a popup showing the updated cart. 
It makes the users' task more convenient. It also has the 
effect of always reminding your customers that they have 
items left in cart and thus helping increase completed 
purchases. 



amazonir 



Shop 2, 

Department - 



Anands Amazon. in Today s Deals Sell Customer Service 
Search All ■» 



y/ 1 item was added to your cart 




Inferno 

by Dan Brown 
?231 00 

Gift Options not available Learn more 



Order Sub-Total: f 381. 00 

2 items in your Cart 

<y Your order qualifies for FREE Delivery. 



CiMtomere who bought the Item that You Added also bought: 




■ 

Digital Fortress 
by Dan Brown 
Paperback 
★ ★★★^ 7 
f3W-m231,00 



Deception Point 
by Dan Brown 
Paperback 
iKif-k-ki 12 
*399-m224.00 



' Vn a Sony SmartWatch 2 

Amazon App Contest > Enter h4ow 



Hello. Anand 
Your Account - 



Wish 
List " 



Inferno 

Ouantit,- 1 



Edit your Cart Proceed to chec 



rJanorama Yearbook 2014 
M (Book& CD) 

Quantity 1 



View Cart (2 items) 




Angels and Demons 

by Dan Brown 

Paperback 

★ ★★★^ 24 

f399-m204 00 
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#23. Layout - Make a Custom 
404 Page 

A 404 page means that the user is trying to access a URL 
which doesn't exist. It may because of a broken link on your 
website or a mistake in the URL. Now, as a website owner, 
you don't want to make the user feel confused. Many 
companies have, therefore, started creating custom 404 
pages. Many of these custom pages say the same thing 
which a classic 404 page says but in an interesting and 
creative manner. Some companies, in addition, link existing 
links on their 404 pages that help the user find out what he 
or she is looking for. 











lOSt.fm Music search 






Music Listen Events Charts 


Join Login 











1^1 404 Page not found 

Whoops, sorry, this page does not exist 

Here are some other useful pages: 
Search for music 
Find a user 
Help section 

Frequently Asked Questions list 
Forums 

...or head tjackto the Lastfrn Homepage 



We Recommend 



#24. Layout -Tailor your 
Website for Mobile Users 




> 



Did you know that website visitors are 51% more likely to 
purchase from an ecommerce site if it has a mobile 
version ? Or that a 1 -second delay in mobile page load time 
equals a 7% loss in conversion? These statistics are a 
measure of the importance that mobile browsing hold for 
an ecommerce website. 

Some things you should concentrate on while improving 
UX for mobile users: 

• You want to use every pixel of that mobile screen 
for maximum effect. Prioritize the core sections of 
your website and present those which have 
maximum relevance for mobile users. For example, 
it may be a good idea to prioritize order tracking and 
contact us section in the mobile version 

• Mobile users are more fickle than the average 
website user. You should, therefore, focus on 
speeding up the page load time even if it means 
sacrificing some less relevant content 

• Remember that in the mobile world, users are using 
the thumb to navigate instead of a mouse or 
touchpad. Modify your screen so that users do not 
click links and buttons unintentionally due to 
incompatibility of the design with a small screen 
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#25. Layout- Use Inline Fornn 
Validation to make Form- 



• I I • 




ing easier 



Filling forms is one of the most effort-inducing tasks that a 
user performs on your website. Errors only make it worse. 
Few things are more irritating than filling a long form only to 
be held back by errors. One of the ways to make form filling 
easier is to use inline form validation, which validates each 
form field as the details are being entered. 



Join Twitter today. 



Ovistian Hdsl 



christian. holstObaymard .com 



<^ Mama looks great 



<^ Wa wfll amaii you a oonfinnBlian. 



V Password is okay. 



X IKs usemaiTHi is already lakanl 



oMttiafV.hai>t c»visti«\.halsl cMtUaruMst 
^ Kaap ma lOQQad-^ on Itva oompular. 

By dtddng DM Dutton , you agroa to tna torro bdowr 

Thaae Tonm ol Sarvloe rranoa*) govern yow tooass to ind use of 
tha aanrtces ■«] Twtnors nMDattes {ina 'Sarvteaa*). and any 

Croats my account 



I 



T«rfma(SaiVlc»' 



Prtoaey Poioy 
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#26. Layout - Use Pagination 
to divide your Searcin Results 
and Product Listings 



Page 2 of 4 (Previous) Q (D O O 

Dan McKinley, Principal Designer at Etsv . an eCommerce 
website focused on handmade or vintage items, gave a talk 
in 2013 wherein he explained how Etsy tested infinite scroll 
to their search listings, only to discover that it had a 
negative effect on user experience and engagement. It 
resulted in fewer clicks on search results as well as a decline 
in the use of the search bar. 

Infinite scrolling makes it more difficult for the users to find 
a particular product in such a setting. Pagination allows a 
user to more easily place a product in the entire product 
listing. It also prevents user frustration which can occur in 
infinite scrolling when the user wants to click on a link on 
the bottom of the page but is unable to do so because of 
continuous loading whenever he/she reaches the bottom. 
Moreover, pagination provides users with a sense of how 
much time they would need to scan the entire list as well as 
gives a happy sense of completion whenever a page is 
completed. 

However, you can use infinite scrolling in cases you have 
fewer products or you deal in fashion products like T-shirts. 
In such cases, it is usually observed that customers go for 
'View Air if they are given the option. 
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Conclusion 



That's about it. Hopefully these best practices will be a 
starting point which you can use to create a culture of User 
Experience within your organization. 

I would like to thank Smashing Magazine, the Baymard 
Institute, the Nielsen Norman Group, CompleteUsability.com 
and PrestaShop.com for their pioneering research on User 
Experience, a lot of which helped in the creation of this 
eBook. 




Thank You 



A big thank you for reading this guide to improving eCommerce User 
Experience. I wish you all the best in increasing sales and conversions 
for your ecommerce website. 

I would love to hear from you about your experiences in improving User 
Experience for your eCommerce website. Just drop me a mail at 
anand.kansal® wingifv. com . 

And yes, if you liked what you've read, please go ahead and share it 
with others! 



Cheers 



Anand Kansal 



Marketer 



https://vwo.com/ 



Follow me @anandkansal88 
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